<template>
  <el-dialog
      v-model="dialogVisible"
      title="用户详情"
      width="600px"
      destroy-on-close
  >
    <el-descriptions :column="1" border>
      <el-descriptions-item label="姓名">{{ user.name }}</el-descriptions-item>
      <el-descriptions-item label="工号">{{ user.code }}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{ user.mobile }}</el-descriptions-item>
      <el-descriptions-item label="邮箱">{{ user.email }}</el-descriptions-item>
      <el-descriptions-item label="性别">
        <span v-if="user.sex === '1'">男</span>
        <span v-else-if="user.sex === '2'">女</span>
        <span v-else style="color: gold">未知</span>
      </el-descriptions-item>
      <el-descriptions-item label="年龄">{{ user.age }}</el-descriptions-item>
      <el-descriptions-item label="用户类型">
        <span v-if="user.userType === '1'">普通用户</span>
        <span v-else-if="user.userType === '2'">管理员</span>
        <span v-else style="color: gold">未知</span>
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ user.createTime }}</el-descriptions-item>
      <el-descriptions-item label="状态">
        <span v-if="user.status === '1'" style="color:blue">使用中</span>
        <span v-else-if="user.status === '2'" style="color:red">已停用</span>
        <span v-else style="color: gold">未知</span>
      </el-descriptions-item>
      <el-descriptions-item label="角色">  <span v-for="role in user.roles">
            <el-button type="success" text bg style="margin-left: 10px"> {{ role }}</el-button>
          </span></el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {reactive, toRefs} from "vue";

const data = reactive({
  dialogVisible: false, // 控制对话框的显示状态
  user: {
    userId: 3,
    name: '张伟',
    code: 'S003',
    mobile: '13800000002',
    email: 'zhang138@163.com',
    sex: '1',
    age: '28',
    status: '1',
    userType: '2',
    createTime: '2025-04-03 14:30:00',
    roles: ['运营人员', '商品管理员']
  },
});
let {dialogVisible, user} = toRefs(data);
//暴露dialogVisible,父组件可以直接使用
defineExpose({
  dialogVisible,
  user
});
</script>